React Native之相机扫码|博客系列 | 前端进阶之旅

本文介绍react-native-camera扫码的应用

更多详情文档 https://github.com/react-native-community/react-native-camera

效果展示

配置

react-native link react-native-camera

@前端进阶之旅: 代码已经复制到剪贴板

// 配置andriod/app/src/build.gradle 

defaultConfig {
    applicationId "com.jtyapps"
    minSdkVersion rootProject.ext.minSdkVersion
    targetSdkVersion rootProject.ext.targetSdkVersion
    versionCode 1
    versionName "1.0"
    ndk {
        abiFilters "armeabi-v7a", "x86"
    }
    // 添加这里
    missingDimensionStrategy 'react-native-camera', 'general'
}

// 配置andriod/gradle/wrapper/gradle-wrapper.properties
// 本教程使用的是这个版本
distributionUrl=https\://services.gradle.org/distributions/gradle-4.10.1-all.zip

@前端进阶之旅: 代码已经复制到剪贴板

添加相机权限

andriod/app/src/main/AndroidManifest.xml

  <uses-permission android:name="android.permission.BLUETOOTH"/>
  <uses-permission android:name="android.permission.BLUETOOTH_ADMIN"/>
  <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
  <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
  <uses-permission android:name="android.permission.CHANGE_NETWORK_STATE"/>
  <uses-permission android:name="android.permission.CHANGE_WIFI_STATE"/>
  <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
  <